<!--
 * @Author: 段本显
 * @Desc: 文件简介
 * @Date: 2021-08-06 14:42:00
 * @LastEditors: 段本显
 * @LastEditTime: 2021-09-15 16:36:27
 * @Email: duanbenxian@jianq.com
 * @Mark: 如果有bug，那肯定不是我的锅，噜噜噜
-->
<template>
  <PageLayout>{{ $t('user.name') }}</PageLayout>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, watch, onBeforeMount } from 'vue'
import { getUser } from '@api/login'
export default defineComponent({
  setup() {
    onBeforeMount(async () => {
      const data = await getUser()
      console.log(data)
    })
    // const state = reactive({})
    const state = reactive({
      count: 0,
      list: new Array(10).fill(1).map((el, index) => ({ text: index }))
    })
    watch(
      () => state.list,
      (count, prevCount) => {},
      {
        deep: true
      }
    )

    const onLoad = () => {
      console.log('onLoad')
      setTimeout(() => {
        state.count = 4
        state.list.push(
          ...new Array(10).fill(1).map((el, index) => ({ text: index }))
        )
      }, 2000)
    }
    const onRefresh = () => {
      onLoad()
    }

    return {
      onLoad,
      onRefresh,
      ...toRefs(state)
    }
  }
})
</script>

<style scoped lang="scss">
li {
  line-height: 30px;
  text-align: center;
}
</style>
